<template>
  <div class="goods-container">
    <div class="goods-wrapper">
      <zl-scrollerView class="menu-wrapper" ref="menuWrapper"
                       :data="goodlist"
                       :scrollbar="false"
                       :click="true"
                       :probeType="3"
                       :pullDownRefresh="false"
                       :pullUpLoad="false"
                       :startY="0">
        <ul>
          <li v-for="(item, index) in goodlist" class="menu-item border-1px"
              :class="{'current':selectIndex === index}"
              @click="_selectMenu(index)">
          <span class="text"> <v-icon class="goods-icon" v-show="item.type>0"
                                      :iconType="classMap[item.type]"></v-icon> {{item.name}}</span>
          </li>
        </ul>
      </zl-scrollerView>
      <zl-scrollerView class="foods-wrapper" ref="foodsWrapper"
                       :data="goodlist"
                       :scrollbar="false"
                       :click="true"
                       :probeType="3"
                       :pullDownRefresh="false"
                       :pullUpLoad="false"
                       :startY="0"
                       :listenScroll="true"
                       @scroll="onFoodScroll">
        <ul>
          <li v-for="item in goodlist" class="food-list food-list-jshook">
            <h1 class="title"> {{item.name}}</h1>
            <ul>
              <li v-for="food in item.foods" class="food-item" @click="openFoodDetail(food, $event)">
                <div class="icon">
                  <img v-lazy="food.icon" width="57">
                </div>
                <div class="content">
                  <h2 class="name">{{food.name}}</h2>
                  <p class="desc" v-show="food.description">{{food.description}}</p>
                  <div class="extra">
                    <span class="count">月售{{food.sellCount}}</span><span class="count">好评率{{food.sellCount}}</span>
                  </div>
                  <div class="price">
                    <span class="nowprice">￥{{food.price}}</span><span v-show="food.oldPrice"
                                                                       class="oldprice">￥{{food.oldPrice}}</span>

                  </div>
                  <div class="cart-wrapper">
                    <v-cartcontrol :food="food"
                    ></v-cartcontrol>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </zl-scrollerView>
    </div>
    <div class="shopchat-wrapper">
      <v-shopcart :delivery-price="shop.deliveryPrice" :select-foods="foodsInCart"
                  :min-price="shop.minPrice"></v-shopcart>
    </div>
    <v-fooddetail :food="selectedFood" ref="food"></v-fooddetail>
  </div>

</template>

<script type="text/ecmascript-6">
  import icon from '@/components/customIcon/customIcon.vue';
  // import Bscroller from 'better-scroll';
  import shopCart from './shopcart/shopcart.vue';
  import cartcontrol from './cartcontrol/cartcontrol.vue';
  import fooddetail from './fooddetail/fooddetail.vue';
  import {mapGetters, mapActions} from 'vuex';
  import scrollerView from '@/components/scrollerView/scrollerView.vue';

  export default {
    data() {
      return {
        listHeight: [],
        selectedFood: {},
        selectIndex: 0
      };
    },
    name: 'goods',
    methods: {
      ...mapActions([
        'GetCurrentShopGoods'
      ]),
      onFoodScroll(pos) {
        this.selectIndex = this._getcurrentIndex(Math.abs(Math.round(pos.y)));
      },
      _getcurrentIndex(y) {
        for (let i = 0; i < this.listHeight.length; i++) {
          let start = this.listHeight[i];
          let end = this.listHeight[i + 1];

          if (!end) {
            end = this.listHeight[this.listHeight.length - 1];
          }
          if (y >= start && y < end) {
            return i;
          }
        }
        return 0;
      },
      _calculateHeight() {
        this.listHeight = [];
        let foodlist = this.$refs.foodsWrapper.$el.getElementsByClassName('food-list-jshook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodlist.length; i++) {
          let item = foodlist[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      },
      _selectMenu(selectedIndex) {
        let foodlist = this.$refs.foodsWrapper.$el.getElementsByClassName('food-list-jshook');
        let el = foodlist[selectedIndex];
        this.$refs.foodsWrapper.scrollToElement(el, 300);
      },
      openFoodDetail(food, event) {
        this.selectedFood = food;
        this.$refs.food.toggle();
      }
    },
    computed: {
      ...mapGetters({
        shop: 'selectedShop',
        goodlist: 'currentShopGoods'
      }),
      foodsInCart() {
        let foods = [];
        this.goodlist.forEach((good) => {
          good.foods.forEach((food) => {
            if (food.count) {
              foods.push(food);
            }
          });
        });
        return foods;
      }
    },
    components: {
      'v-icon': icon,
      'v-shopcart': shopCart,
      'v-cartcontrol': cartcontrol,
      'v-fooddetail': fooddetail,
      'zl-scrollerView': scrollerView
    },
    watch: {
      // 如果 question 发生改变，这个函数就会运行
      goodlist: function () {
        this.$nextTick(() => {
          this._calculateHeight();
        });
      },
      shop: function (shop) {
        this.GetCurrentShopGoods(this.shop.shopId);
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
      this.GetCurrentShopGoods(this.shop.shopId);
      this.$nextTick(() => {
        this._calculateHeight();
      });
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import '../../../common/stylus/mixin.styl'
  .goods-container
    overflow hidden
    display flex
    flex-direction column
    width 100%
    .shopchat-wrapper
      position absolute
      bottom 0
      height 48px
      width 100%
      z-index 10
    .goods-wrapper
      position absolute
      bottom 48px
      top 0
      width 100%
      flex-grow: 1
      display flex
      .menu-wrapper
        flex 0, 0, 80px
        width 100px
        height 100%
        background-color #f3f5f7
        .menu-item
          display: flex
          align-items center
          width 100%
          height 54px
          font-size 12px
          color color rgb(147, 153, 159)
          line-height 14px
          padding 0 12px
          border-after-1px(rgba(7, 17, 27, 0.1))
          &.current
            background #fff
            font-weight 700
            .text
              border-none()
          .goods-icon
            margin-right 2px
          .text
            width 56px
            vertical-align middle
            font-size 12px
      .foods-wrapper
        flex-grow: 1
        background-color #fff
        height 100%
        .food-list
          .title
            border-left 2px solid #d9dde1
            font-size 12px
            line-height 26px
            height 26px
            color rgb(147, 153, 159)
            background #f3f5f7
            padding-left 14px
          .food-item
            display flex
            padding 18px
            border-after-1px(rgba(7, 17, 27, 0.1))
            &:last-child
              border-none()
              margin-bottom 0
            .icon
              flex 0 0 57px
              margin-right 10px
            .content
              flex 1
              .name
                margin 2px 0 8px 0
                font-size 14px
                line-height 14px
                height 14px
                color rgb(7, 17, 27)
              .desc, .extra
                font-size 10px
                color rgb(147, 153, 159)
                line-height 10px
                height 10px
                margin-top 8px
              .extra
                .count
                  margin-right 12px
              .price
                font-weight 700px
                line-height 24px
                .nowprice
                  margin-right 8px
                  font-size 14px
                  color rgb(240, 20, 20)
                .oldprice
                  font-size 10px
                  color rgb(147, 153, 159)
                  text-decoration line-through
              .cart-wrapper
                position: absolute
                right 0
                bottom 12px
</style>
